import React, { useState, useEffect, useCallback, useMemo } from 'react';

function Callback() {
  // const [name, setName] = useState("Leo");
  const [name, setName] = useState("Leo");

  useEffect(() => {
    setInterval(() => {
      setName((oldName) => oldName + "Lucy");
    }, 1000);
  }, [name]);

  console.log("父组件执行");

  // 同样可以用 useMemo 来缓存函数
  // const sayHello = useMemo(() => {
  //   return () => alert("我是父组件！");
  // }, []);

  const sayHello = useCallback(() => {
    alert("我是父组件");
  }, []);

  const xxx = useMemo(() => {
    return { a: 'xxx' };
  }, []);

  return <PureChildren name={xxx} sayHello={sayHello} />;
}

const Children = () => {
  console.log('子组件渲染');
  return (
    <div>静态子组件</div>
  );
}

const PureChildren = React.memo(Children);

// class Children extends React.PureComponent {
//   render() {
//     console.log("子组件执行");
//     return (
//       <div>静态子组件</div>
//     );
//   }
// }

export default Callback;